<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>通用模板-首页</title>
 <link href="css/style.css" rel="stylesheet">
</head>

<body>
 <!-- 顶部消息行+导航--开始 -->
 <header>
  <div class="topMsg">
   <div class="container">
    <p>松蕴大胖学习简单grid布局</p>
   </div>
  </div>
  <nav class="topMenu">
   <div class="container">
    <ul class="topMenu_menulst">
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
   </div>
  </nav>
 </header>
 <!-- 顶部消息行+导航--结束 -->

 <!-- 非全屏大图--开始 -->
 <section class="container mb-20">
  <div class=" bigImg img">

  </div>
 </section>
 <!-- 非全屏大图--结束 -->

 <!-- 非全屏菜单--开始 -->
 <section class="container mb-20">
  <ul class="middleMenu">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </section>
 <!-- 非全屏菜单--结束 -->

 <!-- 非全屏图文区--开始 -->
 <section class="container mb-20">
  <ul class="Cubic">
   <li>
    <div class="img"></div>
    <div class="title"></div>
   </li>
   <li>
    <div class="img"></div>
    <div class="title"></div>
   </li>
   <li>
    <div class="img"></div>
    <div class="title"></div>
   </li>
   <li>
    <div class="img"></div>
    <div class="title"></div>
   </li>
  </ul>
 </section>
 <!-- 非全屏图文区--结束 -->

 <!-- 全屏图--开始 -->
 <section class="mb-20 fullImg">

 </section>
 <!-- 全屏图--结束 -->

 <!-- 非全屏左图右文--开始 -->
 <section class="container mb-20">
  <div class="imgDesc">
   <div class="img">

   </div>
   <div class="desc">

   </div>
  </div>
 </section>
 <!-- 非全屏左图右文--结束 -->

 <!-- 非全屏复杂图片(这个略复杂,算是grid的别的用法, 仿的是某领先手机首页)--开始 -->
 <section class="container mb-20">
  <ul class="complexImg">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </section>
 <!-- 非全屏复杂图片--结束 -->


 <!-- 左文右图--开始 -->
 <section class="container mb-20">
  <div class="txtImg">
   <div class="txt">
    <div class="title mb-10"></div>
    <div class="subtitle mb-10"></div>
    <div class="btn"></div>
   </div>
   <div class="img"></div>
  </div>
 </section>
 <!-- 左文右图--结束 -->
 <!-- 全屏页脚--开始 -->
 <footer>
  <div class="container">
   <ul class="mb-20 footerMenu">
    <li>
     <ul class="list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
     </ul>
    </li>
    <li>
     <ul class="list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
     </ul>
    </li>
    <li>
     <ul class="list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
     </ul>
    </li>
    <li>
     <ul class="list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
     </ul>
    </li>
    <li>
     <ul class="list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
     </ul>
    </li>
   </ul>
   <div class="footerMsg">
    <div class="left">松蕴大胖学习简单grid布局</div>
    <div class="right"></div>
   </div>
  </div>
 </footer>
 <!-- 全屏页脚--结束 -->

</body>

</html>